.button {
  overflow: hidden;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: hsl(var(--navigation-hs) var(--lt-300));
  text-align: center;
  border: 1px solid hsl(var(--navigation-hs) var(--lt-300));
  border-radius: calc(var(--radius-xl) / 2);
}

.tab {
  cursor: pointer;
  padding: 0 var(--gap-md);
  color: hsl(var(--navigation-hs) var(--lt-300));
  background-color: transparent;
  border: none;
  outline: none;
}

.active {
  color: var(--white-accent-clr);
  background-color: hsl(var(--navigation-hs) var(--lt-300));

  &:focus-visible {
    border: none;
    outline: none;
  }
}
